<!-- src/components/Breadcrumb.vue -->
<template>
  <div class="breadcrumb">
    <ul>
      <li
        v-for="(crumb, index) in breadcrumbs"
        :key="index"
        :style="breadcrumbItemStyle"
      >
        <router-link
          v-if="index !== breadcrumbs.length - 1"
          :to="crumb.path"
          class="breadcrumb-link"
        >
          {{ crumb.label }}
        </router-link>
        <span v-else>{{ crumb.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AppBreadcrumb', // 修改为多词名称
  props: {
    breadcrumbs: {
      type: Array,
      required: true
    },
    breadcrumbItemStyle: {
      type: Object,
      default: () => ({
        textDecoration: 'none',
        color: 'rgba(51, 51, 51, 0.926)',
        fontWeight: 'bold',
        fontSize: '14px'
      })
    }
  }
};
</script>

<style scoped>
.breadcrumb {
  background-color: #f8f9fa;
  font-size: 14px;
  width: 100%;
}

.breadcrumb ul {
  list-style: none;
  display: flex;
  gap: 5px;
  margin-left:-2%;
}

.breadcrumb li::after {
  content: " / ";
  margin-left: 5px;
  margin-right: 5px;
}

.breadcrumb li:last-child::after {
  content: "";
}

.breadcrumb-link {
  text-decoration: none;
  color: inherit;
}

.breadcrumb-link:hover {
  text-decoration: underline;
}
</style>
